<template>
  <div class="app-container">
    <!--表单组件-->
    <el-dialog
      append-to-body
      :close-on-click-modal="false"
      :before-close="crud.cancelCU"
      :visible="crud.status.cu > 0"
      :title="crud.status.title"
      width="500px"
    >
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        size="small"
        label-width="80px"
      >
        <el-form-item label="类型编号" prop="productType">
          <el-input v-model="form.productType" :disabled="crud.status.edit" style="width: 370px" />
        </el-form-item>
        <el-form-item label="类型名称" prop="productTypeName">
          <el-input v-model="form.productTypeName" style="width: 370px" />
        </el-form-item>
        <el-form-item label="描述" prop="remark">
          <el-input v-model="form.remark" :rows="3" type="textarea" style="width: 370px"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="text" @click="crud.cancelCU">取消</el-button>
        <el-button
          :loading="crud.status.cu === 2"
          type="primary"
          @click="crud.submitCU"
          >确认</el-button
        >
      </div>
    </el-dialog>

    <el-row :gutter="20">
      <el-col :span="10">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>产品类型</span>
          </div>
          <!--工具栏-->
          <div class="head-container">
            <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
            <crudOperation :permission="permission" />
          </div>
          <el-table
            ref="table"
            v-loading="crud.loading"
            :data="crud.data"
            size="small"
            style="width: 100%"
            highlight-current-row
            @selection-change="crud.selectionChangeHandler"
            @current-change="handleCurrentChange"
          >
            <el-table-column prop="productType" label="类型编号" align="center"/>
            <el-table-column prop="productTypeName" label="类型名称" align="center"/>
            <el-table-column prop="remark" label="描述" />
            <el-table-column
              v-if="checkPer(['admin', 'dict:edit', 'dict:del'])"
              label="操作"
              fixed="right"
              width="150px"
              align="center"
            >
              <template slot-scope="scope">
                <udOperation :disabledDle="true" :data="scope.row" :permission="permission" />
              </template>
            </el-table-column>
          </el-table>
          <!--分页组件-->
          <pagination />
        </el-card>
      </el-col>
      <el-col :span="14">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>产品列表</span>
          </div>
          <productDetail ref="productDetail" :permission="permission" />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import crudProductType from "@/api/product/productType";
import CRUD, { presenter, header, form, crud } from "@crud/crud";
import rrOperation from "@crud/RR.operation";
import crudOperation from "@crud/CRUD.operation";
import udOperation from "@crud/UD.operation";
import productDetail from "./productDetail";
import pagination from '@crud/Pagination'

const defaultForm = { id: null, productTypeName: null, productType: null, remark: null,createBy: null ,updateBy: null };
export default {
  components: {
    crudOperation,
    rrOperation,
    udOperation,
    productDetail,
    pagination
  },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  cruds() {
    return CRUD({
      title: "产品类型",
      url: "api/productType",
      idField: "id",
      sort: "id,desc",
      optShow: {
        add: true,
        edit: false,
        del: false,
        download: false,
        reset: false,
        import: false,
      },
      crudMethod: { ...crudProductType },
    });
  },
  data() {
    return {
      permission: {
        add: ["admin", "productType:add"],
        edit: ["admin", "productType:edit"],
        del: ["admin", "productType:del"],
      },
      rules: {
        productTypeName: [{ required: true, message: "请输入类型名称", trigger: "blur" }],
        productType: [{ required: true, message: "请输入类型编号", trigger: "blur" }],
      },
      queryTypeOptions: [
        { key: "productTypeName", display_name: "类型名称" },
        { key: "productType", display_name: "类型编号" },
      ],
    };
  },
  methods: {
    // 钩子：在获取表格数据之前执行，false 则代表不获取数据
    [CRUD.HOOK.beforeRefresh]() {
      return true;
    },
    // 选中类型后，展示产品详情
    handleCurrentChange(val) {
      if (val) {
        this.$refs.productDetail.productType = val.productType;
        this.$refs.productDetail.crud.toQuery();
      }
    },
  },
};
</script>

<style scoped>
</style>
